<template>
  <div>
    <h1 style="color: green">11月份考试</h1>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-container>
        <!-- 头部 -->
        <el-header style="text-align: right; font-size: 12px">
          <div style="width: 100%; height: 60px">
            <div style="width: 1000px; height: 60px; text-align: left">
              <i class="el-icon-s-unfold" style="width: 50px; height: 30px"></i>
              <span style="width: 50px; height: 30px"> </span>
            </div>
          </div>
        </el-header>
        <!-- 子路由(身体) -->
        <el-main>
          <div style="text-align: left" class="div1">
            <span>考试</span>
            <br />

            <!-- <el-input placeholder="学生姓名" v-model="input1" style="width:200px;margin-right:20px"></el-input>
            <el-input placeholder="手机号码" v-model="input2" style="width:200px;margin-right:20px"></el-input>
            <el-input placeholder="身份证号" v-model="input3" style="width:200px;margin-right:20px"></el-input> -->

            <!--查询-->
            <!-- <el-button type="info" icon="el-icon-search" @click="select">查询</el-button> -->
            <!--添加按钮-->
            <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">新增</el-button>
            <!--添加模态框-->
            <el-dialog title="新增学生信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
              <span>新增学生</span>
              <br />
              <div class="addinput">
                <el-input placeholder="学生姓名" v-model="addname" style="width: 300px"></el-input>
                <el-input placeholder="学号" v-model="addstusum" style="width: 300px"></el-input>
                <el-select v-model="addsex" placeholder="请选择性别">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-input placeholder="市场部" v-model="addscb" style="width: 300px"></el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add(), (dialogVisible = false)">确 定</el-button>
              </span>
            </el-dialog>

            <!--修改模态框-->
            <el-dialog title="修改" :visible.sync="updatadialogVisible" width="30%" :before-close="handleClose">
              <span>修改</span>
              <br>
              <div class="">
                <el-input placeholder="学生姓名" v-model="upname" style="width:300px;"></el-input>
                <el-input placeholder="学号" v-model="upstusum" style="width:300px;"></el-input>
                <el-input placeholder="市场部" v-model="upscb" style="width:300px;"></el-input>
                <el-input placeholder="性别" v-model="upsex" style="width:300px;"></el-input>
                <el-input placeholder="pkid" v-model="uppkid" style="width:300px;" v-show="false"></el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="updatadialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="update(), updatadialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
          </div>

          <el-table :data="tableData">
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="140">
            </el-table-column>
            <el-table-column prop="stusum" label="号码" width="120">
            </el-table-column>
            <el-table-column prop="scb" label="scb" width="200">
            </el-table-column>

            <template slot-scope=""><!-- 时间转换 -->
              <el-table-column label="创建时间" width="400">
                <template slot-scope="scope">
                  <span v-html="getYMDHMS(scope.row.createTime)"></span>
                </template>
              </el-table-column>
            </template>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-button type="text" @click="find(scope.row.pkid)">修改</el-button>
                <!--删除按钮-->
                <el-button size="mini" type="danger" @click="deleteks(scope.row.pkid)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row>
            <el-col style="text-align: right">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">

              </el-pagination>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "kaoshi",
  //页面自动加载，
  created: function () {
    this.select();
  },
  data() {
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数
      options: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      value: "",

      input1: "",
      input2: "",
      input3: "",
      tableData: [],

      addname: "",
      addstusum: "",
      addsex: "",
      addscb: "",
      dialogVisible: false,

      upname: "",
      upstusum: "",
      upsex: "",
      upscb: "",
      uppkid: "",
      updatadialogVisible: false,
    };
  },
  props: {},
  methods: {
    //模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },  

    select: function () {
      var that = this;
      this.$axios.post("/Ssbkaoshi3/quest", {
        //分页
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      })
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.data;
           that.total = response.data.pageInfo.total;
        });
    },// 获取当前页的数据信息
    //pageSize 默认每页显示条数改变时会触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
    }, //currentPage 默认当前页数改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
    },

    add: function () {
      var that = this;
      this.$axios
        .post("/Ssbkaoshi3/save", {
          name: that.addname,
          sex: that.addsex,
          stusum: that.addstusum,
          scb: that.addscb,
        })
        .then(function (response) {
          that.select(),
            that.$message({
              //弹出框
              message: "新增成功!",
              type: "success",
            });
        });
    },
    deleteks: function (pkid) {
      var that = this;
      this.$axios
        .post("/Ssbkaoshi3/del", {
          pkid: pkid,
        })
        .then(function (response) {
          that.select();
          that.$message({
            //弹出框
            message: "删除成功!",
            type: "success",
          });
        });
    },
    find: function (pkid) {
      this.updatadialogVisible = true;
      var that = this;
      this.$axios
        .post("/Ssbkaoshi3/findpkid", {
          pkid: pkid,
        })
        .then(function (response) {
          if (response.data.code == "3333") {
            that.upname = response.data.data.name;
            that.upscb = response.data.data.scb;
            that.upsex = response.data.data.sex;
            that.upstusum = response.data.data.stusum;
            that.uppkid = response.data.data.pkid;
            that.select();
          } else {
            //alert("修改失败");
          }
        });
    },
    update: function () {
      var that = this;
      this.$axios.post("/Ssbkaoshi3/update", {
        name: that.upname,
        sex: that.upsex,
        stusum: that.upstusum,
        scb: that.upscb,
        pkid: that.uppkid,

      })
        .then(function (response) {

          that.select()
        })
    },
    //时间格式转换
    getYMDHMS: function (timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>